<!-- 参考网上的 编写人杨振宇 编写时间 2018-12-21 -->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>MacBook</title>
		<style type="text/css">
			html,body{
				overflow: hidden;
			}
			.board {
				margin: 0 auto;
				padding: 0;
				width: 600px;
				height: 450px;
				margin-top: 50px;
				background: rgb(210, 210, 210);
				border-radius: 20px;
				position: relative;
				box-shadow: 0px 5px 6px rgb(160, 160, 160);
				background: -webkit-linear-gradient(60deg, rgba(250, 250, 250, 1) 25%, rgba(210, 210, 210, 1));
			}
			
			.board:before {
				content: '';
				display: block;
				width: 780px;
				height: 20px;
				position: absolute;
				left: -90px;
				top: -20px;
				background: rgb(210, 210, 210);
				background: -webkit-linear-gradient(top, rgba(210, 210, 210, 1) 50%, rgb(255, 255, 255));
				border-bottom: 2px solid rgb(0, 0, 0);
				border-radius: 0 0 3px 3px;
				border-top-left-radius: 390px 18px;
				border-top-right-radius: 390px 18px;
			}
			
			.blackbar {
				width: 450px;
				height: 18px;
				position: absolute;
				left: 75px;
				border-radius: 2px;
				border-bottom: 2px solid rgb(255, 255, 255);
				border-left: 2px solid rgb(255, 255, 255);
				background: -webkit-linear-gradient(rgb(30, 30, 30), rgb(60, 60, 60) 35%, rgb(100, 100, 100) 50%, rgb(30, 30, 30) 65%);
				background: -linear-gradient(rgb(30, 30, 30), rgb(60, 60, 60) 35%, rgb(100, 100, 100) 50%, rgb(30, 30, 30) 65%);
			}
			
			.keyboard {
				position: absolute;
				width: 530px;
				height: 216px;
				left: 35px;
				top: 35px;
				border: 1px solid rgb(180, 180, 180);
				border-radius: 8px;
				background: rgb(250, 250, 250);
				box-shadow: 2px 0 2px rgb(180, 180, 180) inset, 0 3px 3px rgb(180, 180, 180) inset, -5px 0 1px rgb(255, 255, 255) inset, 0 -3px 3px rgb(180, 180, 180) inset;
			}
			
			ul,
			li {
				list-style: none;
				margin: 0 auto;
				padding: 0;
				display: block;
				font-family: "Vrinda";
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			ul {
				width: 530px;
				margin-top: 8px;
				margin-left: 4px;
			}
			
			li {
				width: 29px;
				height: 29px;
				float: left;
				margin-left: 5px;
				margin-bottom: 5px;
				background: rgb(30, 30, 30);
				color: rgb(200, 200, 200);
				text-align: center;
				line-height: 28px;
				font-size: 12px;
				border-radius: 4px;
				border: 1px solid rgb(70, 70, 70);
				box-shadow: 1px 0 0 rgb(0, 0, 0), 0 1px 0 rgb(0, 0, 0), -1px 0 0 rgb(0, 0, 0), 0 -1px 0 rgb(0, 0, 0);
			}
			
			li:nth-child(-n+14):nth-child(n+1) {
				width: 30px;
				height: 15px;
				line-height: 14px;
			}
			
			li:nth-child(-n+27):nth-child(n+15) span,
			li:nth-child(40) span,
			li:nth-child(41) span,
			li:nth-child(42) span,
			li:nth-child(53) span,
			li:nth-child(54) span,
			li:nth-child(-n+66):nth-child(n+64) span {
				display: block;
				margin-top: 6px;
				line-height: 0.5;
			}
			
			li:nth-child(56),
			li:nth-child(67) {
				width: 73px;
			}
			
			li:nth-child(-n+74):nth-child(n+68) {
				height: 33px;
				line-height: 45px;
			}
			
			li:nth-child(72) {
				width: 173px;
				line-height: 15px;
			}
			
			li:nth-child(71),
			li:nth-child(73) {
				width: 37px;
			}
			
			li:nth-child(75),
			li:nth-child(77),
			li:nth-child(78) {
				margin-top: 18px;
				height: 14px;
				line-height: 18px;
			}
			
			li:nth-child(76) {
				height: 13px;
				margin-top: 19px;
				line-height: 13px;
			}
			
			li:nth-child(78) {
				position: absolute;
				bottom: 22px;
				right: 42px;
				line-height: 13px;
			}
			
			li:nth-child(28) {
				text-align: right;
				padding-right: 3px;
				width: 42px;
				line-height: 40px;
				/* 应该是45 内边距加了3px*/
			}
			
			li:nth-child(29) {
				text-align: left;
				padding-left: 3px;
				width: 42px;
				line-height: 40px;
				/* 应该是45 内边距加了3px*/
			}
			
			li:nth-child(43) {
				text-align: left;
				padding-left: 3px;
				width: 52px;
				line-height: 40px;
				/* 应该是55 内边距加了3px*/
			}
			
			li:nth-child(55) {
				text-align: right;
				padding-right: 3px;
				width: 52px;
				line-height: 40px;
				/* 应该是55 内边距加了3px*/
			}
			
			li:nth-child(56) {
				text-align: left;
				padding-left: 3px;
				width: 70px;
				line-height: 40px;
				/* 应该是73 内边距加了3px*/
			}
			
			li:nth-child(67) {
				text-align: right;
				padding-right: 3px;
				width: 70px;
				line-height: 40px;
				/* 应该是73 内边距加了3px*/
			}
			
			.touch {
				position: absolute;
				width: 200px;
				height: 150px;
				border: 2px solid rgb(190, 190, 190);
				bottom: 23px;
				left: 200px;
				border-radius: 8px;
			}
			
			.btn {
				width: 100px;
				margin: 0 auto;
				margin-top: 25px;
				text-align: center;
				line-height: 42px;
				font-size: 23px;
				background: rgb(30, 30, 30);
				color: rgb(255, 255, 255);
				border-radius: 10px;
			}
			
			.btn:active,
			.btn:hover {
				background: rgba(30, 30, 30, 0.7);
			}
			
			@keyframes shake {
				0%,
				100% {
					-webkit-transform: translateX(0) rotate(0deg);
				}
				25% {
					-webkit-transform: translateX(30px) rotate(20deg);
				}
				75% {
					-webkit-transform: translateX(-30px) rotate(-20deg);
				}
			}
			
			@-wekit-keyframes shake {
				0%,
				100% {
					-webkit-transform: translateX(0) rotate(0deg);
				}
				25% {
					-webkit-transform: translateX(30px) rotate(20deg);
				}
				75% {
					-webkit-transform: translateX(-30px) rotate(-20deg);
				}
			}
			
			@-moz-keyframes shake {
				0%,
				100% {
					-webkit-transform: translateX(0) rotate(0deg);
				}
				25% {
					-webkit-transform: translateX(30px) rotate(20deg);
				}
				75% {
					-webkit-transform: translateX(-30px) rotate(-20deg);
				}
			}
			
			@-o-keyframes shake {
				0%,
				100% {
					-webkit-transform: translateX(0) rotate(0deg);
				}
				25% {
					-webkit-transform: translateX(30px) rotate(20deg);
				}
				75% {
					-webkit-transform: translateX(-30px) rotate(-20deg);
				}
			}
			
			.anima-shake {
				animation: shake 0.4s infinite;
				-o-animation: shake 0.4s infinite;
				-moz-animation: shake 0.4s infinite;
				-webkit-animation: shake 0.4s infinite;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="board">
				<div class="blackbar">

				</div>
				<div class="keyboard">
					<ul>
						<!-- class="anima-shake" -->
						<li>esc</li>
						<li>F1</li>
						<li>F2</li>
						<li>F3</li>
						<li>F4</li>
						<li>F5</li>
						<li>F6</li>
						<li>F7</li>
						<li>F8</li>
						<li>F9</li>
						<li>F10</li>
						<li>F11</li>
						<li>F12</li>
						<li>O</li>
						<li><span>~</span><span>`</span></li>
						<li><span>!</span><span>1</span></li>
						<li><span>@</span><span>2</span></li>
						<li><span>#</span><span>3</span></li>
						<li><span>$</span><span>4</span></li>
						<li><span>%</span><span>5</span></li>
						<li><span>^</span><span>6</span></li>
						<li><span>&</span><span>7</span></li>
						<li><span>*</span><span>8</span></li>
						<li><span>(</span><span>9</span></li>
						<li><span>)</span><span>0</span></li>
						<li><span>_</span><span>-</span></li>
						<li><span>+</span><span>=</span></li>
						<li>delete</li>
						<li>tab</li>
						<li>Q</li>
						<li>W</li>
						<li>E</li>
						<li>R</li>
						<li>T</li>
						<li>Y</li>
						<li>U</li>
						<li>I</li>
						<li>O</li>
						<li>P</li>
						<li><span>{</span><span>[</span></li>
						<li><span>}</span><span>]</span></li>
						<li><span>|</span><span>\</span></li>
						<li>cops lock</li>
						<li>A</li>
						<li>S</li>
						<li>D</li>
						<li>F</li>
						<li>G</li>
						<li>H</li>
						<li>J</li>
						<li>K</li>
						<li>L</li>
						<li><span>:</span><span>;</span></li>
						<li><span>"</span><span>'</span></li>
						<li>enter</li>
						<li>shift</li>
						<li>Z</li>
						<li>X</li>
						<li>C</li>
						<li>V</li>
						<li>B</li>
						<li>N</li>
						<li>M</li>
						<li><span><</span><span>,</span></li>
						<li><span>></span><span>.</span></li>
						<li><span>?</span><span>/</span></li>
						<li>shift</li>
						<li>fn</li>
						<li>control</li>
						<li>option</li>
						<li>command</li>
						<li></li>
						<li>command</li>
						<li>option</li>
						<li>←</li>
						<li>↓</li>
						<li>→</li>
						<li>↑</li>
					</ul>
				</div>
				<div class="touch">

				</div>
			</div>

		</div>
		<div class="btn" onclick="myclick">
			启动
		</div>
	</body>
	<script type="text/javascript">
		var el = document.querySelector('#app')
		var btn = document.querySelector('.btn')
		var list = document.querySelectorAll('li');
		var isAnima = false;
		btn.onclick = function() {
			// anima-shake
			if(isAnima) {
				list.forEach(function(item, index) {
					item.classList.remove('anima-shake')
				})
				isAnima = false
				btn.innerText = '启动'
			} else {
				list.forEach(function(item, index) {
					setTimeout(function() {
						item.classList.add('anima-shake')
					}, Math.floor(Math.random() * 380))
				})
				isAnima = true
				btn.innerText = '停止'
			}

		}
		el.onmousedown = function(e) {
			if(isAnima) return;
			var disx = e.pageX - el.offsetLeft
			var disy = e.pageY - el.offsetTop
			document.onmousemove = function(e) {
				el.style.transform = getDis(e.pageX - disx, e.pageY - disy)
			}
			document.onmouseup = function(e) {
				el.style.transform = ''
				document.onmousemove = document.onmouseup = null
			}
		}

		function getDis(x, y) {
			x = Math.floor(x / 3)
			y = Math.floor(y / 2)
			return 'rotateX(' + y + 'deg) rotateY(' + x + 'deg)'
		}
	</script>

</html>